<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息表案例</title>
    <link rel="stylesheet" href="index.css"> <!-- 加载CSS文件 -->
</head>
<body>

<h1>新增学员</h1>
<form class="录入学员信息" autocomplete="off">
    姓名：<input type="text" class="姓名" name="姓名"/>
    年龄：<input type="text" class="年龄" name="年龄"/>
    性别:
    <select name="性别" class="性别">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    薪资：<input type="text" class="薪资" name="薪资"/>
    就业城市：<select name="就业城市" class="就业城市">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
    <option value="曹县">曹县</option>
</select>
    <button class="录入">录入</button>
</form>

<h1>就业榜</h1>
<table>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
    </tr>
    </thead>
    <!--    这里以下的标签tbody, 是显示我们录入的内容. 通过JS渲染实现-->
    <tbody>
    <!-- 内容格式如下
      <tr>
        <td>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>
        <td>15000</td>
        <td>上海</td>
        <td>
          <a href="javascript:">删除</a>
        </td>
      </tr>
      -->
    </tbody>
</table>

<!--
案例要求:
①： 点击录入按钮可以录入数据
②： 点击删除可以删除当前的数据
-->
<!--
说明：
本次案例，我们尽量减少dom操作，采取操作数据的形式
增加和删除都是针对于数组的操作，然后根据数组数据渲染页面 (这样做是为了以后,后端的思路)

核心思路：
①： 声明一个空的数组
②： 点击录入，根据相关数据，生成对象，追加到数组里面
③： 根据数组数据渲染页面-表格的 行
④： 点击删除按钮，删除的是对应数组里面的数据
⑤： 再次根据数组的数据，渲染页

简单的说,是分成两个模块
一个是录入模块,记录录入的数据
一个是渲染模块,把录入的数据显示的页面, 同时点删除按钮,可以删除数据 所在的行
-->

<script>
    // 声明一个空的数组 存储对象， 增加和删除都是对这个数组进行操作
    let 数组_学员录入信息 = []
    const tbody标签 = document.querySelector('tbody') // 获取DOM元素

    // 渲染函数, 因为增加和删除 学员信息表格 都需要渲染
    function 渲染页面_学员信息() {
        // 先清空tbody标签里所有的内容,即清除所有的行
        // 以后每一次调用函数, 会重新循环 依次渲染行表格
        tbody标签.innerHTML = ``

        // 循环遍历数组,依次读取数据 渲染行表格
        for (let i = 0; i < 数组_学员录入信息.length; i++) {
            const 节点_tr标签 = document.createElement('tr') // 创建节点,这个节点是 tbody标签 的子节点

            // 写入内容. 另外注意引号是 反引号
            节点_tr标签.innerHTML = `
            <td>${数组_学员录入信息[i].对象id}</td>
            <td>${数组_学员录入信息[i].姓名}</td>
            <td>${数组_学员录入信息[i].年龄}</td>
            <td>${数组_学员录入信息[i].性别}</td>
            <td>${数组_学员录入信息[i].薪资}</td>
            <td>${数组_学员录入信息[i].就业城市}</td>
            <td>
              <a href="javascript:" data-id="${i}">删除</a> <!-- 这里设置 data自定义属性,是配合输出模块的 -->
            </td>
        `
            // 追加节点  父元素.appendChild(子元素)
            tbody标签.appendChild(节点_tr标签)
        }
    }



    /*
    1. 点击录入模块
    (1). 首先取消表单默认提交事件
    (2). 创建新的对象，里面存储 表单获取过来的数据，格式如右图
    (3). 追加给数组
    (4). 渲染数据。 遍历数组， 动态生成tr， 里面填写对应td数据， 并追加给 tbody
    (5). 重置表单
    (6). 注意防止多次生成多条数据，先清空 tbody
    */
    const 录入学员信息 = document.querySelector('.录入学员信息') // 获取DOM元素
    // 监控 表单提交事件
    录入学员信息.addEventListener('submit', function (事件对象) {
        事件对象.preventDefault() // 阻止默认行为, 这里是阻止表单提交 默认页面会跳转
        console.log(11) // 控制台测试, 如果是提交的默认行为 信息会一闪而过

        /*
        点击录入,需要验证表单 没有空的
        (1). 获取所有需要填写的表单， 他们共同特点都有 name属性
        (2). 遍历这些表单，如果有一个值为空，则return 返回提示输入为空中断程序
        (3). 注意书写的位置，应该放到新增数据的前面， 阻止默认行为的后
        */
        const 数组_name属性 = document.querySelectorAll('.录入学员信息 [name]') // []属性选择器
        // 遍历数组, 依次判断 name属性 相关标签里的, 内容是否空
        for (let i = 0; i < 数组_name属性.length; i++) {
            // 判断 文本框里的内容是否, 空
            if (数组_name属性[i].value === '') {
                return alert('内容必须全部填写,不能有空的')
                // return 如果执行, 下面的代码就不在执行. 从而实现中断功能
            }
        }

        // 获取DOM元素,记录数据到 对象 用
        const 姓名 = document.querySelector('.姓名')
        const 年龄 = document.querySelector('.年龄')
        const 性别 = document.querySelector('.性别')
        const 薪资 = document.querySelector('.薪资')
        const 就业城市 = document.querySelector('.就业城市')

        // 创建对象,存储一位学员的信息
        const 对象_学员的信息 = {
            对象id: 数组_学员录入信息.length + 1, // 数组原先是空,长度0. 使用要+1
            姓名: 姓名.value, // value文本框的信息, 这里我们要读取我们输入文本框里的信息
            年龄: 年龄.value,
            性别: 性别.value,
            薪资: 薪资.value,
            就业城市: 就业城市.value
        }
        console.log(对象_学员的信息) //控制台输出 对象信息,看是否录入成功

        // 追加对象到数组里
        数组_学员录入信息.push(对象_学员的信息)
        // 清空表单填写的信息  reset重置
        录入学员信息.reset()

        // 调用渲染函数
        渲染页面_学员信息()
    })



    /*
    2. 渲染删除模块
    (1). 采用事件委托形式，给 tbody 注册点击事件
    (2). 点击链接，要删除的是对应数组里面的这个数据，而不是删除dom节点，如何找到这个数据？
    (3). 前面渲染数据的时候，动态给a链接添加 自定义属性 data-id=“0”,这样点击当前对象就知道索引号了
    (4). 根据索引号，利用 splice 删除这条数据
    (5). 重新渲染
    */
    // 利用事件委托, 监控 删除按钮
    tbody标签.addEventListener('click', function (事件对象) {
        if (事件对象.target.tagName === 'A') { // 删除按钮在a标签里
            console.log(事件对象.target.dataset.id) // 控制台输出,当前元素的自定义属性 data-id 看是否正确

            // 删除数组里,对应的对象
            let 下标 = +(事件对象.target.dataset.id) // 这个自定义属性的值, 就当作数组的 下标. +()是转换成数字类型
            数组_学员录入信息.splice(下标, 1) //起始位置下标,删除的个数
            console.log(数组_学员录入信息)

            // 再次重新渲染页面信息
            渲染页面_学员信息()
        }
    })

</script>
</body>
</html>